/*Login Page*/

.skinHeader.semiTransparent.noHeaderRight {
    background: transparent !important;
  }
  
  div#loginPage {
    margin-top: 0 !important;
    overflow: hidden scroll;
  }
  
  #loginPage h1::after {
    content: "Sign In";
    font-size: 32px;
  }
  
  #loginPage h1 {
    font-weight: 700;
    font-size: 0;
    margin-bottom: 21.44px;
    margin-top: 32px !important;
    text-align: left;
  }
  
  .inputContainer {
    margin-bottom: 1.8em;
    margin-top: 1.8em;
  }
  
  #loginPage .padded-left.padded-right.padded-bottom-page {
    background: #000000bf;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    margin: 0;
    position: absolute;
    border-radius: 10px;
    width: 30vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 3em !important;
    max-width: 24em;
  }
  
  #loginPage .readOnlyContent {
    padding: 0 !important;
    width: 100% !important;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  
  .manualLoginForm {
    height: 100%;
    width: 100%;
  }
  
  #loginPage .inputContainer {
    background: #333;
    border-radius: var(--rounding);
    height: 4em;
    position: relative;
  }
  
  #loginPage .inputLabel.inputLabelFocused,
  #loginPage .inputLabel:not(.inputLabel-float) {
    font-size: 0.8em;
    left: 4%;
    top: 4%;
    transform: none;
  }
  
  .visualLoginForm {
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  
  #divUsers {
    flex-flow: revert;
    overflow: scroll visible;
    justify-content: flex-start;
  }
  
  #loginPage .emby-input {
    height: 100%;
    border: none;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
    padding: 4% !important;
    font-size: 1.1em;
    border: none !important;
  }
  
  #loginPage .inputLabel {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: 300;
    transition: 0.2s ease;
    color: #8c8c8c;
  }
  
  #loginPage .inputContainer:focus,
  #loginPage .inputContainer:focus-within {
    background: #454545;
  }
  
  .layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 90vh !important;
    background: transparent;
  }

  /* Login page BG pic for mobile */
  
  .layout-mobile #loginPage {
    background: linear-gradient(to left, #000000bf, #000000bf),
      url(../images/background.jpg) !important;
    background-size: cover !important;
  }
  
  @media (orientation: landscape) {
    .layout-mobile #loginPage .padded-left.padded-right.padded-bottom-page {
      width: 90vh !important;
      max-width: 90vh !important;
      height: -webkit-fit-content !important;
      height: -moz-fit-content !important;
      height: fit-content !important;
      transform: translateX(-50%);
      top: 0;
    }
  }
  
  /*Login background with radial gradient overlay to make it look like netflix login*/
  
  #loginPage {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 20%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 20%),
      linear-gradient(to left, rgba(0, 0, 0, 0.75), transparent 20%),
      linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent 20%),
      url(../images/background.jpg) !important;
    background-size: cover !important;
  }

.loginDisclaimer p {
	background-image: linear-gradient(to bottom right, rgba(78,81,216,0.5), rgba(230,103,175,0.5));
	border-radius: 5px;
	padding: 3px 6px;
}
.button-submit {
}